<template>
  <el-container v-loading="loading">
      <el-header></el-header>
      <el-main>
        <Search :searchItems="searchItems" :updateTable="updateTable"/>
        <div class="table">
          <el-table :data="tableData" style="width: 100%" @row-click="checkDetail">
            <el-table-column prop="fields.group" label="Group" width="180" />
            <el-table-column prop="fields.accession" label="Accession" width="180" />
            <el-table-column prop="fields.title" label="Title" width="330"/>
            <el-table-column prop="fields.cell_line" label="Cell_line" width="120"/>
            <el-table-column prop="fields.technology" label="Technology" width="120"/>
            <el-table-column prop="fields.antibody" label="Antibody" width="120"/>
            <el-table-column prop="fields.treatment" label="Treatment" width="180"/>
          </el-table>
        </div>
        <div class="pagination">
          <el-pagination
            v-model:current-page="currentPage1"
            :page-size="currentPageSize"
            layout="total, prev, pager,jumper, next"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-main>
      <el-footer></el-footer>
  </el-container>
</template>

<script lang="ts" setup name="Cseq">
  import { onBeforeMount, ref, reactive } from 'vue'
  import Search from '../../components/Search.vue'
  import { get, post } from '../../axios/api';
  import { useRouter } from 'vue-router';
  import { ElMessage } from 'element-plus'

  let tableData = ref([]);
  let total = ref()
  let currentPage1 = ref(1)
  let currentPageSize = ref(10)
  let loading = ref(false)

  const router = useRouter()
  const selectedValues = ref();
  // options首先初始化为空，在handleOptions里边赋值
  const searchItems:any = ref([
        {label: 'Group', value: 'group', options: {}},
        {label: 'Cell_line', value: 'cell_line', options: {}},
        {label: 'Technology', value: 'technology', options: {}},
      ])

  async function getData(page: number, page_size: number, params: any) {
    let res:any = {}
    let data = {
      page,
      page_size,
      params: params,
    }
    loading.value = true
    try {
      res = await post('/get_data/', data)
      if (res && res.success) {
        loading.value = false
        tableData.value = res.list
        currentPage1.value = res.page
        total.value = res.total
      }
    } catch (error:any) {
      loading.value = false
      ElMessage({
        message: error,
        type: 'error',
      })
    }
    
  }

  const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`)
  }
  async function handleCurrentChange(val: number) {
    let data = {
      page: val,
      page_size: currentPageSize.value,
      params: selectedValues.value
    }
    let res:any = {}
    loading.value = true
    try {
      res = await post('/get_data/', data)
      if (res && res.success) {
        loading.value = false
        currentPage1.value = val
        tableData.value = res.list
      }
    } catch (error:any) {
      ElMessage({
        message: error,
        type: 'error',
      })
    }

  }

  async function handleOption(items: any) {
    for (let item of items) {
      let res:any = {}
      try {
        res = await post('/get_options/', {option: item.value})
      } catch (error:any) {
        ElMessage({
          message: error,
          type: 'error',
        })
      }
      if (res && res.success) {
        let target = searchItems.value.find((el: any) => el.value === item.value)
        target.options = res.data
      }
    }
  }

  function updateTable(val: any) {
    selectedValues.value = val;
    getData(currentPage1.value, currentPageSize.value, selectedValues.value)
  }

  function checkDetail(item:any) {
    router.push({
      name:'detail',
      params: {
        id: item.fields.accession
      }
    })
  }

  onBeforeMount(() => {
    getData(currentPage1.value, currentPageSize.value, selectedValues.value)
    handleOption(searchItems.value)
  })
</script>

<style scoped>
  .table {
    margin: 10px 5%;
    display: flex;
    justify-content: center;
  }

  .pagination {
    margin: 20px 10px;
    display: flex;
    justify-content: center;
  }
</style>